import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import Store from '../store'
import HoverImage from '../components/HoverImg'
import btn_big_n from '@/resource/auctionManage/btn_big_n.png'
import btn_big_s from '@/resource/auctionManage/btn_big_s.png'
import { history } from 'umi'
import Bar from '../components/Bar'
import { useEffect, useState } from 'react'
import { SocketContainer } from '@/hooks/useSocket'
import { useResize } from '@/hooks/useResize'

export default observer(() => {
    const store = useLocalObservable(() => Store)
    const { send, onMessage, remove } = SocketContainer.useContainer()
    const { form_statistic_arr, setData } = store
    useResize({ id: 'resize_container' })

    useEffect(() => {
        document.title = '拍卖游戏'
        // const submit = ({ data }: any) => {
        //     console.log(data)
        //     setTimeout(() => {
        //         setData('form_statistic_arr', data.form_statistic_arr)
        //     }, 0)
        // }
        // onMessage('submit', submit)
        // return () => {
        //     remove('submit', submit)
        // }
    }, [])

    return (
        <div className={styles.container}>
            <div id="resize_container">
                <div className={styles.title}>拍卖统计表</div>
                <div className={styles.frame}>
                    <div className={styles.scroll_wrapper}>
                        {form_statistic_arr.map((item, index: number) => {
                            console.log(item.statistic)
                            return (
                                <div key={item.id}>
                                    <div className={styles.bar_title}>
                                        {index + 1}、{item.describe}
                                    </div>
                                    <Bar data={item.statistic.map(i => Number(i.count))} id={item.id} />
                                </div>
                            )
                        })}
                    </div>
                </div>
                <HoverImage
                    className={styles.statr_btn}
                    placeholderSrc={btn_big_n}
                    src={btn_big_s}
                    onClick={() => {
                        send('step_flow', { params: { step: '3' } })
                    }}
                    wait={500}
                >
                    开始拍卖游戏
                </HoverImage>
            </div>
        </div>
    )
})
